import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { 
    HeaderWrapper,
    Logo,
    Nav, 
    NavItem, 
    NavSearch, 
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem,
    Addition, 
    Button, 
    SearchWrapper } from './style'
import { actionCreators } from './store'    
import { Link } from 'react-router-dom'
import {actionCreators as loginActionCreators} from '../../pages/login/store'


class Header extends Component{
    getListArea = () => {
       const { list, page, focused, handleMouseEnter, mouseIn, handleMouseLeave, totalPage, handleChangeList } = this.props;
       const newList = list.toJS();
       const pageList = [];
       for(let i=(page -1) * 10; i<page*10; i++) {
          pageList.push(
            <SearchInfoItem key={i}>{newList[i]}</SearchInfoItem> 
          )
       }
       if(focused || mouseIn) {
          return (
            <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                <SearchInfoTitle>
                    <span>热门搜索</span>
                    <SearchInfoSwitch
                     onClick={() => handleChangeList(page, totalPage, this.spinIcon)}
                     >
                         <i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">&#xe852;</i>
                         换一换
                    </SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    { pageList }
                </SearchInfoList>
            </SearchInfo>
          )
       }else {
           return null
       }
    }

    render() {
        const {focused, handleInputFocus, handleInputBlur, list, login, loginOut} = this.props;
        return (
            <div>
                <HeaderWrapper>
                    <Link to="/">
                      <Logo />
                    </Link>
                    <Nav>
                        <NavItem className='left active'>首页</NavItem>
                        <NavItem className='left'>下载App</NavItem>
                        {
                           login ? <NavItem className='right' onClick={loginOut}>退出</NavItem> :  <NavItem className='right' onClick={this.loginIn}>登录</NavItem>
                        }
                        <NavItem className='right'><i className="iconfont">&#xe636;</i></NavItem>
                        <SearchWrapper>
                            <NavSearch className={focused ? 'focused' : ''} onFocus={() => handleInputFocus(list)} onBlur={handleInputBlur}></NavSearch>
                            <i  className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe637;</i>
                            {this.getListArea(focused)}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                        <Button className="writting"><i className="iconfont">&#xe61b;</i>写文章</Button>
                        <Button className="reg">注册</Button>
                    </Addition>
                </HeaderWrapper>
            </div>
        )
    }

    loginIn = () => {
        this.props.history.push("/login");
    }

}

const mapStateToProps = (state) => {
    return {
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        totalPage: state.getIn(['header', 'totalPage']),
        login: state.getIn(['login', 'login']),
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            (list.size === 0) && dispatch(actionCreators.getList());
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur())  
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave()) 
        },
        handleChangeList(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/gi, '');
            if(originAngle) {
                originAngle = parseInt(originAngle, 10)
            }else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate('+ (originAngle + 360) +'deg)';
            if(page < totalPage) {
               dispatch(actionCreators.getSwitchList(page + 1))
            }else {
                dispatch(actionCreators.getSwitchList(1)) 
            }
        },
        loginOut() {
          dispatch(loginActionCreators.getLoginOut())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Header));